<template>
  <div class="all">
    <header>
      <div class="div" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">
        <span>详细资料</span>
      </div>
      <div class="div"></div>
    </header>
    <div class="content">
      <ul>
        <li class="li_left" >
          <img v-if="photo === null || photo === undefined || photo === ''" src="../../assets/photo.png" alt="">
          <img  v-else :src="photo" alt="">
        </li>
        <li class="li_content">
          <p class="name">{{name}}</p>
          <p class="name" v-show="nick_name !== undefined && nick_name !== null">昵称: {{nick_name}}</p>
          <p class="phone">
            <span v-if="sex == 1">男</span>
            <span v-else>女</span>
            <span>|</span>
            <span>{{age}}岁</span>
          </p>
          <p class="address" v-show="address !== undefined">{{address}}</p>
        </li>
      </ul>
    </div>
    <div class="sendDiv"  @click="clickSend()" v-show="Number(isFriend) === 1">
      <img src="../../assets/发消息.png" style="width: 15px;height: 15px;margin-right: 8px" alt="">
      <span>发消息</span>
    </div>
    <div class="del" v-show="Number(isFriend) === 1"  @click="clickDel()">
      <img src="../../assets/删除好友.png" alt="" style="width: 15px;height: 15px;margin-right: 8px">
      删除好友
    </div>
    <van-dialog v-model="show"
                width="80%"
                confirm-button-color="#1da4f2"
                @confirm="onConfirm"
                show-cancel-button>
      <template #title>
        <span>确定删除该好友吗？</span>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import videoHttp from '../../http/video.http'
import {Toast} from 'vant'
export default {
  name: 'DetailsFriend',
  data () {
    return {
      show: false,
      userid: '',
      imgHttp: videoHttp.imgHttp,
      name: '',
      nick_name: '',
      photo: '',
      phone: '',
      age: '',
      sex: '',
      address: '',
      isFriend: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.getInfo()
  },
  methods: {
    // 点击
    clickSend () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('doctorPatientChat', this.userid + ',' + this.name + ',' + '0' + ',' + '0', function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 点击删除
    clickDel () {
      this.show = true
    },
    onConfirm () {
      this.$http.deleteCircleXiangHu({'userid': this.userid})
        .then(res => {
          console.log(res)
          if (res.status === 'success') {
            this.show = false
            this.$router.go(-1)
            Toast('删除成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取好友详情信息
    getInfo () {
      this.$http.findUserOne({userid: this.userid})
        .then(res => {
          console.log(res)
          this.name = res.data.data.NICK_NAME
          this.nick_name = res.data.data.NICK_NAME2
          this.photo = res.data.data.PHOTO
          this.sex = res.data.data.SEX
          this.age = res.data.data.age
          this.phone = res.data.data.PHONE
          this.address = res.data.data.LOCATION
          this.isFriend = res.data.data.relationship
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
  }
  header .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  header .div:nth-child(2){
    justify-content: center;
  }
  header .div:nth-child(3){
    flex-direction: row-reverse;
  }
  header .div:nth-child(3) .side{
    margin-right: 15px;
  }
  header .div img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .side{
    color: #1da4f2;
  }
  .content{
    width: 100%;
    background: #FFFFFF;
    overflow: auto;
  }
  .content ul {
    width: 100%;
    /*height: 75px;*/
    display: flex;
    padding: 10px 0;
  }
  .content ul li{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .li_left, .li_right{
    width: 22%;
  }
  .li_left img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }
  .li_content{
    width: 55%;
    flex-direction: column;
  }
  .li_content p{
    width: 100%;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .name{
    font-size: 15px;
    color: #333333;
    margin-bottom: 5px;
  }
  .address, .phone{
    width: 90%;
    text-align: left;
    font-size: 13px;
    color: rgba(153, 153, 153, 1);
  }
  .phone span{
    margin-right: 5px;
  }
  .btn{
    width: 60px;
    height: 29px;
    background: #1DA4F2;
    border-radius: 14px;
    border: none;
    color: #FFFFFF;
  }
  .del{
    width: 100%;
    height: 44px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #E3170D;
  }
  .sendDiv{
    width: 100%;
    height: 44px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1DA4F2;
  }
</style>
